<template>
  <!-- 体重记录曲线页 -->
  <view class="pages">
  	<h-nav-bar :fixed="true" title="体重记录" backgroundColor="#fff"></h-nav-bar>
  	<view class="head">
  		<view class="head_t">今日体重</view>
  		<view class="head_n"><text>{{babyDetail?.today_record||'无记录'}}</text>公斤</view>
  		<view class="head_b">
  			<view class="head_b_l">
  				<view class="head_b_l_t">
  					<image v-if="babyDetail?.mark=='+'" class="head_b_l_t_img" src="@/static/pediatrics/s.png"></image>
  					<image v-else-if="babyDetail?.mark=='-'" class="head_b_l_t_img" src="@/static/pediatrics/wen.png"></image>
  					<view class="head_b_l_t_x" v-else></view>
  					{{babyDetail?.mark=='+'?'增加':(babyDetail?.mark=='-'?'减少':'持平')}}{{babyDetail?.gap}}kg
  				</view>
  				<view class="head_b_l_b">已增重</view>
  			</view>
  			<view class="head_b_l">
  				<view class="head_b_l_t">{{babyDetail?.recommend_weight}}kg</view>
  				<view class="head_b_l_b">建议体重</view>
  			</view>
  			<view class="head_b_l">
  				<view class="head_b_l_t">{{babyDetail?.BMI||'-'}}</view>
  				<view class="head_b_l_b">出生BMI<image class="sec_none_img" src="@/static/pediatrics/wen.png" @click="bmiShow=true"></image></view>
  			</view>
  		</view>
  	</view>
  	<view class="section">
  		<view class="sec_has" v-if="isHas">
  			<view class="sec_has_t">
  				<view class="sec_has_t_l">曲线体重表</view>
  				<view class="sec_has_t_r" @click="toUrl('/pediatrics/weightManagement/recordDetail')">查看更多<image class="sec_has_t_r_img" src="@/static/pediatrics/right_black_arrow.png"></image></view>
  			</view>
  			<view class="sec_has_c"><view class="sec_has_c_l"></view>近七天体重范围</view>
  			<view class="sec_has_e">
  				<qiun-data-charts type="area" style="width: 100%;height: 100%;" :opts="opts" :chartData="chartData" />
  			</view>
  			<view class="sec_has_f"><text>*</text>数据来源：根据每日记录体重展示最近一周的体重曲线记录图，可以直观地观察到宝宝体重的波动趋势，无论是减重、增重还是维持现状，都能一目了然。这份表格不仅促进了自我监控，还为制定和调整健康计划提供了宝贵的数据支持。</view>
  		</view>
  		<view class="sec_none" v-if="!isHas">
  			<view>
  				<image class="sec_none_img" src="@/static/images/nones.png"></image>
  				<view class="sec_none_text">暂无记录~</view>
  			</view>
  		</view>
  		<!-- <view class="sec_btn" @click="keepWeight">
  			<image class="sec_btn_img" src="@/static/grow/jiac.png"></image>记体重
  		</view> -->
  		<h-line :height="bottoms"></h-line>
  	</view>
  </view>
	<up-popup :show="bmiShow" @close="bmiShow=false" round="12">
    <view class="bmi_box">
    	<image class="bmi_box_img" src="@/static/pediatrics/del_mask_word.png" @click="bmiShow=false"></image>
      <view class="bmi_box_title">BMI指数</view>
      <view class="bmi_box_con">BMI指数又称为体重指数或体质指数，是目前国际上较常用的衡量人体胖瘦程度及是否健康的指标。</view>
      <view class="bmi_box_con">BMI计算公式为BMI=体重(kg)/身高(m)^2，3~10岁的儿童BMI指数的标准在15.5~17.0kg/m^2之间。因为儿童的BMI指数根据年龄、地区、人种及性别等因素的不同而存在评价标准的差异，所以如需明确诊断孩子是否存在体格发育异常的情况，一般还需结合其他的指标进行综合考量。</view>
      <view class="bmi_box_cona">通过测算及判断儿童的BMI指数，可了解到儿童的营养状况及是否存在肥胖的情况，其测算结果可用于指导饮食的调整。如若儿童属于肥胖的标准，除了调整饮食外，还需要多进行锻炼和体育运动。</view>
      <view class="bmi_box_cona">以上内容仅供参考，如若儿童BMI指数不属于健康的范围，则建议家长及时带其前往医院就诊，在医生指导下进行规范治疗及专业的饮食指导。</view>
			<h-line :height="bottoms+20"></h-line>
    </view>
	</up-popup>
	<!-- 体重编辑弹窗 -->
	<u-popup :show="showWeight" :round="10" mode="bottom" @close="showWeight = false">
		<view class="weight_pop_box">
			<view class="time" v-if="addWeightRecord" @click="handletime">
				<text class="time_info">{{ todayTime }}</text>
				<text class="time_info" style="margin: 0 8rpx">{{
          weightTimeValue || formatDate(Date.now(), 'HH:mm')
        }}</text>
				<up-icon :name="flag ? 'arrow-up-fill' : 'arrow-down-fill'" color="#333333" size="14"></up-icon>
			</view>
			<view class="time" v-else>
				<text class="time_info">{{ todayTime }}</text>
				<text class="time_info" style="margin: 0 8rpx">{{
          weightTimeValue || formatDate(Date.now(), 'HH:mm')
        }}</text>
			</view>
			<view class="weight_pop_close" @click="weightPopClose">
				<up-icon name="close" color="#333333" size="20"></up-icon>
			</view>
			<numberKeyboard textColor="#2ABE93" v-if="!addWeightRecord" :inputValueD="eidnValue" @saveInput="saveWeight"></numberKeyboard>
			<numberKeyboard textColor="#2ABE93" v-else @saveInput="saveWeight"></numberKeyboard>
		</view>
	</u-popup>
	<!-- 时间选择弹窗 -->
	<u-popup :show="showTimePicker" :round="10" mode="bottom" @close="closetimepicker">
		<view>
			<view class="time">
				<text class="time_info">{{ todayTime }}</text>
				<text class="time_info" style="margin: 0 8rpx">{{weightTimeValue || formatDate(Date.now(), 'HH:mm')}}</text>
			</view>
			<view style="margin-top: 50rpx">
				<h-picker-dateTime lightBgColor="#54CEAB" :showValue="false" @changeTime="weightTimeChange" @confirm="weightTimeVerify" :value="formatDate(Date.now(), 'YYYY-MM-DD HH:mm')"></h-picker-dateTime>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import numberKeyboard from '@/components/numberKeyboard/numberKeyboard.vue'
	import { onLoad, onPullDownRefresh, onReachBottom, onReady, onShow } from '@dcloudio/uni-app'
	import { navigateBack, navigateTo, formatDate, showToast } from '@/utils'
	import { weightFoldLineImg } from '@/api/patients/index.js'
	import {
		getRecordWeight,
		setRecordWeight
	} from '@/api/pregnancy/index'
	const tops = ref(0)
	const bottoms = ref(0)
	const dateTime=ref(formatDate(Date.now(), 'YYYY-MM-DD HH:mm'))
	const updown=ref(0)
	const isHas=ref(true)
	const bmiShow=ref(false)
	const showWeight = ref(false)
	const showTimePicker = ref(false)
	//编辑的时间
	const weightTimeValue = ref('')
	const todayTime = ref('今天')
	const eidnValue = ref('0.0')

	const chartData = ref({
		categories: [],
		series: [{
			name: '',
			data: [],
		}, ],
	})

	const opts = ref({
		color: ['#D4FDF2'],
		padding: [15, 10, 0, 15],
		dataLabel: false,
		dataPointShape: false,
		enableScroll: false,
		legend: {
			show: false,
		},
		xAxis: {
			axisLine: false,
		},
		yAxis: {
			data: [{
				min: 0,
				unit:'kg',
				axisLine:false
			}, ],
		},
		extra: {
			area: {
				type: 'straight',
				opacity:1,
				addLine: true,
				width: 3,
				gradient: false,
				activeType: 'hollow',
			},
		},
	})
	const babyDetail=ref({})
	onReady(() => {
		uni.getSystemInfo({
			success: (e) => {
				tops.value = e.statusBarHeight * 2
				bottoms.value = e.safeAreaInsets.bottom * 2
			}
		})
	})
	let childId=""
	onLoad((o) => {
		childId=o.childId
		addWeightPreams.value.child_id=o.childId
		getLine()
		getToday()
	})
	async function getLine(){
		const res= await weightFoldLineImg({
			form:3,
			child_id:childId
		})
		const list=res.data;
		let arr1 = []
		let arr2 = []
		for(var i in list){
			arr1.push(getTime(list[i].day))
			arr2.push(list[i].detail.num||'')
		}
		getServerData(arr1, arr2)
	}
	async function getToday(){
		const res= await getRecordWeight({
			form:3,
			child_id:childId
		})

			if(res.data.history_lst.data.length>0){
				isHas.value=true
			}else{
				isHas.value=false
			}
		babyDetail.value=res.data
	}
	function getTime(time){
		console.log(time)
		return formatDate(new Date(time), 'MM/DD')
	}
	const flag = ref(false)

	function toUrl(url){
		navigateTo(url+'?childId='+childId)
	}
	//添加体重
	const addWeightRecord = ref(false)
	//添加体重参数
	const addWeightPreams = ref({
		weight: '',
		date: formatDate(Date.now(), 'YYYY-MM-DD'),
		set_time: formatDate(Date.now(), 'YYYY-MM-DD HH:mm'),
		form:3,
		child_id:""
	})
	//记体重
	function keepWeight() {
		weightTimeValue.value = ''
		addWeightPreams.value.set_time = formatDate(Date.now(), 'YYYY-MM-DD HH:mm')
		addWeightPreams.value.date = formatDate(Date.now(), 'YYYY-MM-DD')
		showWeight.value = true
		todayTime.value = '今天'
		addWeightRecord.value = true
	}
	const handletime = () => {
		showWeight.value = false
		showTimePicker.value = true
		flag.value = !flag.value
	}
	function weightTimeVerify() {
		if(!addWeightPreams.value.set_time) {
			showToast('请选择时间')
		} else {
			isChangeTime.value = true
			showTimePicker.value = false
			flag.value = !flag.value
			showWeight.value = true
			addWeightPreams.value.date = addWeightPreams.value.set_time.split(' ')[0]
			// weightTimeValue.value = addWeightPreams.value.set_time.split(' ')[1]
			// showTimePicker.value = false
			// flag.value = !flag.value
			// showWeight.value = true
			// todayTime.value = weightPreams.value.set_time.split(' ')[0]
		}
	}
	//关闭体重弹窗
	function weightPopClose() {
		showWeight.value = false
	}
	//体重时间选择
	function weightTimeChange(e, n) {
		addWeightPreams.value.set_time = e
		todayTime.value = n
		weightTimeValue.value = e.split(' ')[1]
	}
	//体重时间确认
	const isChangeTime = ref(false)

	//编辑
	function editRecord(id) {
		addWeightRecord.value = false
		weightRecordList.value.forEach((item) => {
			if(item.id == id) {
				eidnValue.value = item.num
				weightPreams.value.weight_id = id
				weightTimeValue.value = item.add_time
				if(item.date == formatDate(Date.now(), 'YYYY-MM-DD')) {
					todayTime.value = '今天'
				} else {
					todayTime.value = item.date
				}
			}
		})
		showWeight.value = true
	}

	const closetimepicker = () => {
		showTimePicker.value = false
		flag.value = !flag.value
		showWeight.value = true
	}
	function saveWeight(e) {
		if(addWeightRecord.value) {
			if(e == '0.0') {
				showToast('您还没有输入体重')
			} else {
				addWeightPreams.value.weight = e
				setRecordWeightFn()
			}
		} else {
			if(e == '0.0') {
				showToast('您还没有编辑体重')
				weightPreams.value.weight = eidnValue.value
			} else {
				weightPreams.value.weight = e
				getLine()
			}
		}
	}
	//记录体重
	async function setRecordWeightFn() {
		const res = await setRecordWeight(addWeightPreams.value)
		if(res?.code == 200) {
			showToast(res.msg)
			showWeight.value = false
			getLine()
		} else {
			showToast(res.msg)
		}
	}
	//体重选择参数
	const weightPreams = ref({
		type: 2,
		weight: '',
		weight_id: '',
	})
	function getServerData(arr1, arr2) {
		//模拟从服务器获取数据时的延时
    console.log(arr2)
		setTimeout(() => {
			chartData.value.categories = arr1
			chartData.value.series[0].data = arr2
		}, 500)
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
.pages{
	height: 100vh;
	display: flex; flex-direction: column;
}
	.head{
		width: 702rpx;
		background: #FFFFFF;
		border-radius:16rpx;
		margin: 20rpx auto;
		.head_t{
			width: 104rpx;
			height: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 30rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin: 30rpx 0 20rpx 30rpx;
		}
		.head_n{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-left: 30rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 50rpx;
				color: #333333;
				line-height: 70rpx;
			}
		}
		.head_b{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.head_b_l{
				width: 234rpx;
				text-align: center;
				padding-top: 30rpx;
				.head_b_l_t{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					.head_b_l_t_img{
						width: 20rpx;
						height: 26rpx;
					}
					.head_b_l_t_x{
						width: 26rpx;
						height: 6rpx;
						background: #A28AFF;
						display: inline-block;
						position: relative;
						top: -6rpx;
					}
				}
				.head_b_l_b{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					padding: 20rpx 0 25rpx;
					image{
						width: 26rpx;
						height: 26rpx;
						margin-left: 10rpx;
						position: relative;
						top: 4rpx;
					}
				}
			}
		}
	}
	.section{
		flex: 1;
		width: 702rpx;
		margin: 0 auto 20rpx;
		display: flex; flex-direction: column;
		.sec_has{
			flex: 1;
			width: 702rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius:16rpx;
			.sec_has_t{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.sec_has_t_l{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}
				.sec_has_t_r{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #777777;
					line-height: 40rpx;
					.sec_has_t_r_img{
						width: 30rpx;
						height: 30rpx;
						position: relative;
						top: 4rpx;
					}
				}
			}
			.sec_has_c{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
				padding: 10rpx 0;
				text-align: left;
				font-style: normal;
				text-transform: none;
				.sec_has_c_l{
					width: 48rpx;
					height: 24rpx;
					background: #D4FDF2;
					float: left;
					margin-top: 5rpx;
					margin-right: 10rpx;
				}
			}
			.sec_has_e{
				width: 100%;
				box-sizing: border-box;
				padding-top: 30rpx;
				height: calc(100% - 404rpx);
			}
			.sec_has_f{
				width: 662rpx;
				margin: 30rpx auto;
				height: 210rpx;
				background: #F6F6F6;
				border-radius:16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				box-sizing: border-box;
				padding: 20rpx;
				text{
					color: #A28AFF;
				}
			}
		}
		.sec_none{
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: row;
			/* 子元素横向排列 */
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			width: 702rpx;
			background: #FFFFFF;
			border-radius:16rpx;
			.sec_none_img{
				width: 212rpx;
				height: 193rpx;
			}
			.sec_none_text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #ABABAB;
				line-height: 36rpx;
				margin-top: 30rpx;
			}
		}
		.sec_btn{
			width: 240rpx;
			height: 88rpx;
			background: #54CEAB;
			border-radius:44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 20rpx auto 0;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			.sec_btn_img{
				width: 26rpx;
				height: 26rpx;
				margin-right: 20rpx;
			}
		}
	}
	.bmi_box{
		box-sizing: border-box;
		padding: 0 45rpx;
		position: relative;
		.bmi_box_img{
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}
		.bmi_box_title{
			padding: 30rpx 0 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.bmi_box_con{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 40rpx;
		}
		.bmi_box_cona{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 40rpx;
		}
	}

	.weight_pop_box {
		font-family: PingFang SC, PingFang SC;
		position: relative;
		.time {
			display: flex;
			align-items: center;
		}
		.weight_pop_close {
			position: absolute;
			top: 26rpx;
			right: 20rpx;
			width: 42rpx;
			height: 42rpx;
			background: #f2f2f2;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	//体重时间确认
	.weight_time_verify {
		font-family: PingFang SC, PingFang SC;
		margin: 50rpx auto;
		width: 542rpx;
		height: 86rpx;
		background: #a28aff;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		line-height: 86rpx;
	}

	.time {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		.time_info {
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.today_weight_value {
		font-weight: 600;
		font-size: 58rpx;
		color: #333333;
	}
</style>
